<template>
	<Page title="出差记录管理" class="data-management-page" :fixed="true">
		<template #body>
			<van-tabs v-model:active="main.tabIndex" type="card" sticky :offset-top="usePxToVwView(45)">
				<van-tab title="未核销" class="tab">
					<div>
						<Unreimbursed></Unreimbursed>
					</div>
				</van-tab>
				<van-tab title="已核销">
					<Reimbursed></Reimbursed>
				</van-tab>
			</van-tabs>
		</template>
	</Page>
</template>

<script setup lang="ts" name="TravelRecordManagement">
import usePxToVwView from "@hooks/usePxTransform"
import { reactive } from "vue"
import TravelRecordManagementClass from "./TravelRecordManagement.ts"
import { defineAsyncComponent } from "vue"

const main = reactive(new TravelRecordManagementClass())

const Unreimbursed = defineAsyncComponent(
	() => import("./Unreimbursed/Unreimbursed.vue")
)
const Reimbursed = defineAsyncComponent(
	() => import("./Reimbursed/Reimbursed.vue")
)
</script>

<style scoped lang="scss">
.data-management-page {
	::v-deep(.body) {
		padding: 0;
	}
}

::v-deep(.van-tabs__nav--card) {
	margin: 0;
}

.tab {
	display: block;
	overflow: auto;
	scroll-behavior: auto;
}
</style>
